<template>
  <div id="order">
    <nav-bar class="nav-bar">
      <div slot="left" class="back" @click="backClick">
        <img src="~assets/img/common/back.svg" alt />
      </div>
      <div slot="center">我的订单</div>
    </nav-bar>
    <scroll class="scroll_content" ref="scroll">
      <div>
        <order-list :orders="orders" />
      </div>
    </scroll>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import OrderList from "./childComps/OrderList";
import Scroll from "components/common/scroll/Scroll";

export default {
  name: "Order",
  components: {
    NavBar,
    OrderList,
    Scroll,
  },
  data() {
    return {
      orders: [],
    };
  },
  methods: {
    backClick() {
      this.$router.push("/profile");
    },
  },
  activated() {
    //拿到订单数据
    this.orders = this.$store.state.orders;
    //重新刷新高度
    this.$refs.scroll.refresh();
  },
};
</script>

<style scoped>
#order {
  height: 100vh;
  position: relative;
  z-index: 9;
}

.back img {
  margin-top: 12px;
}
.nav-bar {
  background-color: var(--color-tint);
  color: aliceblue;
}

.scroll_content {
  height: calc(100vh - 44px);
  background-color: white;
}
</style>